<template>
	<ma-body>
		<ma-refresh slot="content">
			<div class="big-box">
				<image src="@/static/img/isBack.png" mode="aspectFill" class="backImg" @tap="toBack"></image>
				<div class="title-box">
					<span class="title-line"></span>
					<div class="title">
						<span class="jiu-font30-fff">实名认证</span>
						<span class="jiu-font32-555">购买数字藏品前需完成实名认证</span>
					</div>
				</div>
				
				<div class="input-box">
					<div class="input-item" style="padding: 6.4vw;">
						<span class="jiu-font28-aaa">真实姓名</span>
						<input type="text" placeholder="请输入真实名字" v-model="name" placeholder-class="jiu-font28-555" style="color: #FFCE80;font-weight: 300;" />
					</div>
					<div class="input-item top267" style="padding: 6.4vw;">
						<span class="jiu-font28-aaa" style="flex-shrink: 0;">身份证号</span>
						<input type="text" placeholder="请输入身份证号码" v-model="idCard" placeholder-class="jiu-font28-555" style="color: #FFCE80;font-weight: 300;width: 100%;" />
					</div>
					<div class="tips-box top267">
						<image src="../../../static/img/zhuyi.png" mode="aspectFill" style="width: 4.27vw;height: 4.27vw;display: block;margin-right: 1.07vw;flex-shrink: 0;"></image>
						<span class="tip-text">根据国家法律法规要求，购买前请先完成实名认证。请提供姓名、身份证号码一致的身份证信息。</span>
					</div>
				</div>
			</div>
		</ma-refresh>
		<bottom-box slot="footer">
			<div class="submit-btn" @tap.stop="onSubmit">提交审核</div>
		</bottom-box>
	</ma-body>
</template>

<script>
	export default{
		data(){
			return{
				idCard: '',
				name: ''
			}
		},
		methods: {
			async onSubmit(){
				if(this.$u.test.idCard(this.idCard) == false){
					uni.showToast({
						icon: 'none',
						title: '身份证输入错误，请检查'
					})
					return;
				}
				
				let idCard = this.idCard.toUpperCase();
				
				let data = {
					idCard: idCard,
					name: this.name
				};
					
				this.$u.api.onRealName(data).then(res=>{
					uni.showToast({
						icon: 'none',
						title: '认证成功'
					});
					uni.navigateBack({
						delta:1
					})
					this.$store.dispatch('user/getMyInfo');
				});
			}
		}
	}
</script>

<style lang="scss">
	input{
		font-size: 3.73vw;
		font-weight: 300;
		.jiu-font28-555{
			font-weight: 300;
		}
	}
	.tips-box{
		display: flex;
		align-items: flex-start;
		.tip-text{
			font-size: 3.2vw;
			font-weight: 300;
			color: #FF9E3E;
		}
	}
	.top267{
		margin-top: 4.27vw;
	}
	.big-box{
		padding-top: 17.07vw;
		display: flex;
		flex-direction: column;
		.title-box{
			display: flex;
			padding-left: 5.33vw;
			.title-line{
				display: block;
				width: 1.07vw;
				height: 17.07vw;
				border-radius: 12.08vw;
				background: linear-gradient(180deg, #A972FF 0%, #FFCE80 100%);
				margin-right: 3.2vw;
			}
			.input-text{
				display: flex;
				flex-direction: column;
			}
			.title{
				display: flex;
				flex-direction: column;
			}
		}
		
		
		.input-box{
			margin-top: 12.8vw;
			padding-left: 5.33vw;
			.input-item{
				display: flex;
				align-items: center;
				padding: 4.8vw 5.33vw;
				padding-left: 6.8vw;
				background-color: #1B1B1B;
				border-radius: 12.8vw 0 0 12.8vw;
				font-size: $jiu-font28;
				font-weight: 500;
				color: #aaaaaa;
				.jiu-font28-aaa{
					width: 15vw;
					margin-right: 4.27vw;
				}
				.send-btn{
					width: 17.07vw;
					line-height: 8.53vw;
					text-align: center;
					border-radius: 5.33vw;
					background-color: #A972FF;
					box-shadow: 0vw 1vw 2vw rgba(71,12,114,0.4800);
					margin-left: 4.27vw;
				}
			}
		}
	}
	.submit-btn{
		width: 100%;
		line-height: 12.8vw;
		border-radius: 6.4vw;
		background-color: #A972FF;
		box-shadow: 0vw 3vw 5vw rgba(71,12,114,0.4800);
		text-align: center;
		color: #000000;
		font-size: 3.73vw;
		font-weight: 500;
	}
</style>
